import React from "react";
import { Form, Card, Input, Button, message } from "antd";

function Edit(props) {
  const { getFieldDecorator } = props.form;
  const nameValidate = (rule, val, callback) => {
    if (val > 200) {
      callback("编号不能大于200");
    } else {
      callback();
    }
  };

  const handleSubmit = (e) => {
    console.log(e);
    e.preventDefault();
    // 验证
    props.form.validateFields((err, val) => {
      if (!err) {
        console.log(val);
        // 调用后台api接口
      } else {
        message.error("请输入正确的信息");
      }
    });
  };
  return (
    <Card title="商品编辑">
      <Form onSubmit={(e) => handleSubmit(e)}>
        <Form.Item label="编号">
          {getFieldDecorator("name", {
            rules: [
              {
                required: true,
                message: "请输入商品编码",
              },
              {
                validator: nameValidate,
              },
            ],
          })(<Input placeholder="请输入商品编号" />)}
        </Form.Item>
        <Form.Item label="价格">
          {getFieldDecorator("price", {
            rules: [
              {
                required: true,
                message: "请输入商品价格",
              },
            ],
          })(<Input placeholder="请输入商品价格" />)}
        </Form.Item>

        <Form.Item>
          <Button htmlType="submit" type="primary">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

export default Form.create()(Edit);
